<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <button class="btn">按钮</button>
    <script>
      /*
            bind
                Function.prototype.bind

                作用：
                    1. 修改this
                    2. 创建一个新的函数

                一般会在我们需要修改回调函数的this的时候使用
        */

      function fn(a, b) {
        console.log(this);
        console.log(a, b);
      }

      // let newFn = fn.bind({
      //   name: '狗蛋'
      // }, 10, 20)
      fn.bind(null)
      fn()
      //创建一个一模一样的函数,但是不会立即调用
      // console.log(newFn);
      // newFn() //{name:'狗蛋'} 10 20


      /*  const module = {
         x: 42,
         getX: function () {
           return this.x;
         }
       };

       console.log(module.getX()); // 42

       // const unboundGetX = module.getX;
       // 上面的代码相当于
       const unboundGetX = function () {
         return this.x; // window.x
       }
       console.log(unboundGetX()); // undefined

       const boundGetX = unboundGetX.bind(module);
       // 把 boundGetX 的this 修改为了 module
       console.log(boundGetX()); // 42 */

      // let btn = document.querySelector(".btn");
      // btn.onclick = function () {
      //   let div = document.creaetElement('div')
      //   div.onclick = (function () {
      //     // 如果不修改this，这个函数原本的this是div
      //     console.log(this)
      //   }).bind(this)
      // }
    </script>
  </body>

</html>